<template>
  <nav class="tab-bar">
    <router-link
      class="tab-item"
      v-for="item in tabData"
      :key="item.id"
      :to="item.id"
    >
      <i class="iconfont" :class="item.icon"></i>
    </router-link>
    <!-- 发布 -->
    <i
      class="iconfont icon-jia"
      type="primary"
      text="显示遮罩层"
      @click="show = true"
    ></i>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false" class="overlay">
      <div class="wrapper">
        <div @click.stop="out" class="into into1">
          <router-link :to="{ name: 'uploadMenu' }">
            <i class="iconfont icon-xie"></i>
            <p>传菜谱</p>
          </router-link>
        </div>
        <div @click.stop="out" class="into into2">
          <router-link :to="{ name: 'uploadVideo' }">
            <i class="iconfont icon-shipin"></i>
            <p>传视频</p>
          </router-link>
        </div>
        <div @click.stop="out" class="into into3">
          <router-link :to="{ name: 'uploadWorks' }">
            <i class="iconfont icon-zhaopian"></i>
            <p>传作品</p>
          </router-link>
        </div>
      </div>
    </van-overlay>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      tabData: [
        // 首页
        {
          id: "/",
          icon: "icon-zhuye",
        },
        // 分类
        {
          id: "/classlist",
          icon: "icon-fenlei",
        },
        // 收藏
        {
          id: "/collect",
          icon: "icon-aixin",
        },
        // 个人中心
        {
          id: "/mine",
          icon: "icon-personal",
        },
      ],
      show: false,
    };
  },
  methods: {
    action() {},
    // 进入后隐藏遮罩层
    out() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes Into {
  0% {
    transform: translateY(100%);
  }
  80% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0);
  }
}
.into {
  animation-timing-function: ease-in-out;
  animation-name: Into;
}

.into1 {
  animation-name: Into;
  animation-duration: 300ms;
}
.into2 {
  animation-name: Into;
  animation-duration: 500ms;
}
.into3 {
  animation-name: Into;
  animation-duration: 700ms;
}
.tab-bar {
  width: 100%;
  height: 49px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  .tab-item {
    text-align: center;
    width: 100%;
    height: 100%;
    color: #000;
    .iconfont {
      font-size: 20px;
      font-weight: 600;
      line-height: 49px;
    }
    &:nth-child(2) {
      margin-right: 50px;
    }
  }
  .router-link-exact-active {
    color: blue;
  }
  .icon-jia {
    position: fixed;
    bottom: 25px;
    left: 44%;
    color: blue;
    background: #fff;
    border-radius: 50%;
    font-size: 50px;
  }
  .overlay {
    background-color: #00000051;
    .wrapper {
      width: 90%;
      display: flex;
      overflow: hidden;
      justify-content: space-evenly;
      position: absolute;
      bottom: 100px;
      padding: 5%;
      div {
        background-image: url(https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u243.png);
        background-repeat: no-repeat;
        &:nth-child(2) {
          background-image: url(https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u236.png);
        }
        a {
          display: block;
          width: 50px;
          height: 70px;
          text-align: center;
          line-height: 50px;

          i {
            color: #fff;
            font-size: 30px;
          }
          p {
            color: #fff;
            font-size: 14px;
            line-height: 20px;
          }
        }
      }
    }
  }
}
</style>
